<template>
	<header class="header">
		<h1>todos</h1>
		<input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll" >
		<label for="toggle-all"></label>
		<input class="new-todo" placeholder="输入任务名称-回车确认" autofocus
		v-model="content"
		@keydown.enter="addFn(content)"
		/>
	</header>
</template>

<script>
import { mapMutations, mapState } from 'vuex'

	export default {
				data () {
					return {
						content: ''
					}
				},
				methods: {
					...mapMutations('todos', [
								'add',
								'changeAll'
						]),

					addFn(name){
						if(name === '') return 

						this.add(name)

						this.content = ''
					},
					
				},

				computed: {
					...mapState('todos', [
								'list',
								
						]),

					isAll:{
						get(){
							return this.list.every(item => item.isDone)
						},
						set(val){
							return this.changeAll(val)
						}
					}
				}
			
			}
</script>
